<template>
  <el-container class="container">
    <el-aside width="280px">
      <!--            <draggable :list="zjComponents"></draggable>-->
      <!--            <draggable-->
      <!--                    class="components-draggable"-->
      <!--                    :list="zjComponents"-->
      <!--                    :group="{ name: 'componentsGroup', pull: 'clone', put: false }"-->
      <!--                    :clone="cloneComponent"-->
      <!--                    draggable=".components-item"-->
      <!--                    :sort="false"-->
      <!--                    @end="onEnd"-->
      <!--            >-->
      <!--                <div v-for="(item,index) in zjComponents" :key="index" class="components-item" >-->
      <!--                    <div class="components-body">-->
      <!--                        {{ item.__config__.label }}-->
      <!--                    </div>-->
      <!--                </div>-->
      <!--            </draggable>-->
      <!--            <span></span>-->
      22
    </el-aside>
    <el-main>Main</el-main>
    <el-aside width="200px">Aside</el-aside>
  </el-container>
</template>
<script>
  // import draggable from "vuedraggable"
  export default {
    components: {
      // draggable
    },
    data() {
      return {
        zjComponents: [
          {
            __config__: {
              label: 'Row',
              tag: 'el-row',
              layout: 'renderparent',
            },
            gutter: 0,
            type: 'default',
            justify: 'start',
            align: 'top',
          },
          {
            __config__: {
              label: 'col',
              tag: 'el-col',
              layout: 'renderChild',
            },
            span: 24,
            offset: 0,
            push: 0,
            pull: 0,
          },
          //
          //     span	栅格占据的列数	number	—	24
          // offset	栅格左侧的间隔格数	number	—	0
          // push	栅格向右移动格数	number	—	0
          // pull	栅格向左移动格数	number

          {
            __config__: {
              layout: 'rowFormItem',
              tagIcon: 'row',
              label: '行容器',
              layoutTree: true,
              document:
                'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes',
            },
            type: 'default',
            justify: 'start',
            align: 'top',
          },
        ],
      }
    },
    methods: {
      cloneComponent(origin) {
        console.log(origin)
      },
      onEnd() {},
    },
  }
</script>
<style lang="scss">
  .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #00ff00;*/
    flex: 1;
    border-top: 0;
  }
</style>
